<template>
  <Layout :class="'bg-white p-2'">
    <Row>
      <Col>
        <Select
          v-model="proid"
          placeholder="请选择项目"
          filterable
          clearable
          @on-change="searchEqu()"
          @on-select="isSelect"
        >
          <Option v-for="item in prolist" :value="item.id"
            >{{ item.proName }}
          </Option>
        </Select>
      </Col>
      <Col offset="1">
        <Select
          v-model="equId"
          placeholder="请选择设备"
          filterable
          clearable
          on
          @on-change="searchIt"
          :disabled="isSelectBoolean"
        >
          <Option v-for="item in equlist" :value="item.id"
            >{{ item.equipmentName }}
          </Option>
        </Select>
      </Col>
      <Col span="2" push="1">
        <Button
          class="m-2 w-75 search-btn"
          type="primary"
          shape="circle"
          icon="ios-search"
          @click="search()"
          >查询</Button
        >
      </Col>
    </Row>
    <br />
    <Row>
      <Col span="24">
        <Card>
          <div style="height: 70px;">
            <div slot="title">
              <Avatar
                icon="md-book"
                size="small"
                style="color: #ffa114; background-color: #ffe2b8;"
              />
              <span>项目描述</span>
            </div>
            <!-- <p></p> -->
            <span v-model="addPro">
              {{ addPro.pro.proName }}&nbsp&nbsp{{ addPro.pro.proInfo }}
            </span>
          </div>
        </Card>
      </Col>
    </Row>
    <br />
    <Row>
      <Col span="12">
        <Card id="project_list_card">
          <div slot="title">
            <Avatar
              icon="md-book"
              size="small"
              style="color: #ffa114; background-color: #ffe2b8;"
            />
            <span>报警预警</span>
          </div>
          <Table
            size="small"
            height="438"
            :class="'m-1'"
            :columns="table1.columnInfo"
            :data="table1.data"
          ></Table>
        </Card>
      </Col>
      <Col span="11" offset="1">
        <Card>
          <div slot="title">
            <Avatar
              icon="md-book"
              size="small"
              style="color: #ffa114; background-color: #ffe2b8;"
            />
            <span>车钩智能分析</span>
          </div>
          <Table
            size="small"
            height="438"
            :class="'m-1'"
            :columns="table2.columnInfo"
            :data="table2.data"
          ></Table>
        </Card>
      </Col>
    </Row>
    <br />
    <Row>
      <Col span="12">
        <Card>
          <div slot="title">
            <Avatar
              icon="md-book"
              size="small"
              style="color: #ffa114; background-color: #ffe2b8;"
            />
            <span>压车臂检测</span>
          </div>
          <Table
            size="small"
            height="438"
            :class="'m-1'"
            :columns="table3.columnInfo"
            :data="table3.data"
          ></Table>
        </Card>
      </Col>
      <Col span="11" offset="1">
        <Card>
          <div slot="title">
            <Avatar
              icon="md-book"
              size="small"
              style="color: #ffa114; background-color: #ffe2b8;"
            />
            <span>轨道状态分析</span>
          </div>
          <Table
            size="small"
            height="438"
            :class="'m-1'"
            :columns="table4.columnInfo"
            :data="table4.data"
          ></Table>
        </Card>
      </Col>
    </Row>
    <br />
    <Row>
      <Col span="24">
        <Card>
          <div slot="title">
            <Avatar
              icon="md-book"
              size="small"
              style="color: #ffa114; background-color: #ffe2b8;"
            />
            <span>设备预警线形图</span>
          </div>
          <div id="line" style="width:1700px; height: 440px"></div>
        </Card>
      </Col>
    </Row>
  </Layout>
</template>

<script>
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/dataZoom')
require('echarts/lib/component/legend')
require('echarts/lib/chart/line')
export default {
  data() {
    return {
      proInfo: {},
      isSelectBoolean: true,
      equId: '',
      proid: '',
      prolist: [],
      equlist: [],
      id: '',
      table1: {
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '报警内容',
            key: 'type',
          },
          {
            title: '报警类型',
            key: 'bjxx',
          },
          {
            title: '报警时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      table2: {
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '挂钩状态',
            key: 'ggzt',
          },
          {
            title: 'AI识别信号',
            key: 'aixbxh',
          },
          {
            title: '时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      table3: {
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '压车臂1#信号',
            key: 'ycbxh1',
          },
          {
            title: '压车臂2#信号',
            key: 'ycbxh2',
          },
          {
            title: '压车臂3#信号',
            key: 'ycbxh3',
          },
          {
            title: '压车臂4#信号',
            key: 'ycbxh4',
          },
          {
            title: '数据时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      table4: {
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '轨道状态',
            key: 'dgzt',
          },
          {
            title: '翻转角度',
            key: 'fzjd',
          },
          {
            title: '对轨激光信号',
            key: 'dgjgxh',
          },
          {
            title: '时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      echarts: {
        xAxis: '',
        data: '',
      },
      addPro: {
        pro: {
          proName: '',
          proInfo: '',
          proAddr: '',
          proLead: '',
          leadTel: '',
          statu: 1,
          datetime: '',
        },
        equIdsStr: '',
      },
    }
  },
  methods: {
    isSelect: function() {
      this.isSelectBoolean = false
    },
    searchIt: function() {
      this.search()
    },
    searchpro: function() {
      let self = this
      this.http
        .get({
          url: '/pro/list',
        })
        .then((data) => {
          this.prolist = data
        })
    },
    searchPro1: function() {
      this.http
        .get({
          url: `/pro/${this.proid}`,
        })
        .then((data) => {
          this.addPro.pro = data
        })
    },
    searchEqu: function() {
      this.searchProInfo()
      this.http
        .get({
          url: `/pro_equ_ref/list/${this.proid}`,
        })
        .then((data) => {
          this.equlist = data
        })
      this.searchPro1()
    },
    searchProInfo: function() {
      this.http
        .get({
          url: `/pro/${this.proid}`,
        })
        .then((data) => {
          this.proInfo = data
        })
    },
    search: function() {
	   var timer1 = setInterval( this.drawLine(), 300000)
      var timer = null
      clearInterval(timer)
      timer = setInterval(() => {
        if (this.$data.equId == undefined || this.$data.proid == undefined) {	
          clearInterval(timer)
        } else {
      this.http
        .get({
          url: '/alert/list',
          param: { id: this.equId },
        })
        .then((data) => {
          var POJOList = []
          data.forEach((data) => {
            let POJO = {
              // id:data.id,
              type: data.type,
              bjxx: data.bjxx,
              sjsj: data.sjsj,
            }
            POJOList.unshift(POJO)
            if (POJOList.length > 10) {
              POJOList.pop()
            }
            return POJOList
          })
          this.$data.table1.data = POJOList
        })

      //车钩智能分析
      this.http
        .get({
          url: '/monitor/hookStatu/list',
          param: { equipmentId: this.equId },
        })
        .then((data) => {
          var POJOList = []
          data.forEach((data) => {
            let POJO = {
              // id:data.id,
              tableId: data.tableId,
              id: data.id,
              ggzt: data.ggzt,
              aixbxh: data.aisbxh,
              sjsj: data.sjsj,
              datetime: data.datetime,
            }
            POJOList.unshift(POJO)
            if (POJOList.length > 10) {
              POJOList.pop()
            }
            return POJOList
          })
          this.$data.table2.data = POJOList
        })

      //压车臂状态
      this.http
        .get({
          url: '/monitor/pressArm/list',
          param: { equipmentId: this.equId },
        })
        .then((data) => {
          var POJOList = []
          data.forEach((data) => {
            let POJO = {
              // id:data.id,
              tableId: data.tableId,
              id: data.id,
              ycbxh1: data.ycbxh1,
              ycbxh2: data.ycbxh2,
              ycbxh3: data.ycbxh3,
              ycbxh4: data.ycbxh4,
              sjsj: data.sjsj,
              datetime: data.datetime,
            }
            POJOList.unshift(POJO)
            if (POJOList.length > 10) {
              POJOList.pop()
            }
            return POJOList
          })
          this.$data.table3.data = POJOList
        })

      //轨道状态分析
      this.http
        .get({
          url: '/monitor/trackStatu/list',
          param: { equipmentId: this.equId },
        })
        .then((data) => {
          var POJOList = []
          data.forEach((data) => {
            let POJO = {
              // id:data.id,
              tableId: data.tableId,
              id: data.id,
              dgzt: data.dgzt,
              fzjd: data.fzjd,
              dgjgxh: data.dgjgxh,
              sjsj: data.sjsj,
              datetime: data.datetime,
            }
            POJOList.unshift(POJO)
            if (POJOList.length > 10) {
              POJOList.pop()
            }
            return POJOList
          })
          this.$data.table4.data = POJOList
        })
      }
      }, 5000)
    },
    drawLine() {

	if (this.$data.equId == undefined || this.$data.proid == undefined) {
	  clearInterval(this.timer)
	} else {	
      this.http
        .get({
          url: '/alert/statistics',
          param: { equipmentId: this.equId },
        })
        .then((data) => {
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('line'))
          // 绘制图表
          myChart.setOption({
            tooltip: {
              trigger: 'axis',
            },
            lineStyle: { color: '#ff0000' },
            dataZoom: {
              show: true,
              realtime: true,
              y: 16,
              height: 30,
              start: 0,
              end: 60,
            },
            xAxis: {
              axisLabel: {
                interval: 0, //横轴信息全部显示
              },
              type: 'category',
              boundaryGap: false,
              data: data.xAxis,
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                data: data.data,
                type: 'line',
              },
            ],
          })
        })
		}
    },
  },

  mounted() {
    this.drawLine()
  },
  created() {
    this.search()
    this.searchpro()
  },
}
</script>

<style>
#project_list_card .ivu-table-body span {
  color: red;
}
</style>
